{{extend 'layout.html'}}

<style>
h3
{
    text-align: center;
    font-weight: bold;
}

table
{
    margin-left: auto;
    margin-right: auto;
}
</style>

<script type="text/javascript">
jQuery(document).ready(function()
{ 
    jQuery('#updatemembers').hide();

    jQuery(window).bind('resize', function()
    {
        jQuery("#grid").setGridWidth(jQuery('#content').width());
    }).trigger('resize');

    jQuery("#members").multiselect2side
    ({
        selectedPosition: 'left',
        moveOptions: false,
        labelsx: 'Members',
        labeldx: 'Non-Members'
    });

    jQuery("#grid").jqGrid(
    {
        url:'{{=URL(r = request, f = 'call', args = ['json','getProjectInfo'])}}/' + '{{=record}}',
        data: "{}",
        datatype: 'json',
        mtype: 'GET',
        contentType: "application/json; charset=utf-8",
        colNames:['Project Name','Short Description','Description',
                  'Creation Date'],
        colModel :[ 
          {name:'name', index:'name', width: 75}, 
          {name:'short_description', index:'short_description'}, 
          {name:'description', index:'description'}, 
          {name:'creation_date', index:'creation_date', width: 65, align: 'center'}
        ],
        pager: '#pager',
        viewrecords: true,
        autowidth: true,
        height: "100%",
        subGrid: true,
        subGridRowExpanded: function(subgrid_id, row_id)
        {
            var subgrid_table_id, pager_id;
            subgrid_table_id = subgrid_id + "_t";
            pager_id = "p_"+subgrid_table_id;
            jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='"+ pager_id + "' class='scroll'></div>");
            jQuery("#" + subgrid_table_id).jqGrid(
            {
                url:'{{=URL(r = request, f = 'call', args = ['json','getMembers'])}}/' + row_id,
                datatype: "json",
                colNames: ['Member', 'Email'],
                colModel: [
                          {username: "username", index: "username", width: 80},
                          {name: "email", index: "email", width: 130}
                          ],
                rowNum:20,
                rownumbers: true,
                pager: pager_id,
                height: '100%',
                autowidth: true,
                viewrecords: true
            });

            jQuery("#" + subgrid_table_id).jqGrid('navGrid',"#" + pager_id,
                    {edit: false, add: false, del: false, search: false,
                     refresh: false})

            jQuery(window).bind('resize', function()
            {
                jQuery("#" + subgrid_table_id).setGridWidth(jQuery('#grid').width() - 30);
            }).trigger('resize');
        },
        caption: 'Project Information'
    }); 

    {{if isNotMember:}}
        jQuery('#pager_left').remove();
    {{pass}}
    jQuery('#pager_center').remove();
    jQuery('#pager_right').remove();

    jQuery("#grid").jqGrid('navGrid',
                           '#pager',
                           {edit: false,
                            add: false,
                            del: false,
                            search: false,
                            refresh: false}
                  ).jqGrid('navButtonAdd',
                           '#pager',
                           {caption: "Edit Project",
                            onClickButton: function()
                            {
                                window.location.href = '{{=URL(r = request, f = 'editproject', args = (record))}}';
                            },
                            position: "first",
                            title: ""}
                  ).jqGrid('navButtonAdd',
                           '#pager',
                           {caption: "Update Members",
                            onClickButton: function()
                            {
                                jQuery('#updatemembers').toggle();
                            },
                            position: "last",
                            title: ""});

    jQuery('select').change(function()
    {
        var members = []; 
        jQuery("#membersms2side__sx option").each(function(i)
        { 
            members[i] = jQuery(this).val();
        });

        jQuery.post("{{=URL(r = request, f = 'updateMembers')}}",
            {'members' : members, 'record' : {{=record}} });
    });
});
</script>

<h3>Project Information</h3>
<p>
<table id="grid"></table>
<div id="pager"></div>

<p style="padding-bottom: 25px">

<div id="updatemembers">
<h3>Add/Remove Project Members</h3>
<p>
<table>
    <tr><td>
    <select name="members" id='members' multiple='multiple' size = "10">
        {{for member in members:}}
            {{if member[0] == creator:}}
                <option value="{{=member[0]}}" selected disabled >{{=member[1]}}</option>
            {{else:}}
                <option value="{{=member[0]}}" selected >{{=member[1]}}</option>
            {{pass}}
        {{pass}}
        {{for user in users:}}
            <option value="{{=user[0]}}">{{=user[1]}}</option>
        {{pass}}
    </select>
    </tr></td>
</table>
</div>
